<!--百度地图api-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">
        body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{width:100%;height:580px;}
        p{margin-left:5px; font-size:14px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ECm5Y1jUTQmbHfQudG33S2HhWzAEW5M7"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <title>给多个点添加信息窗口</title>
</head>
<body>


            <div id="allmap"></div>

<!--<p>点击标注点，可查看由纯文本构成的简单型信息窗口</p>-->


</body>
</html>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">


        // 百度地图API功能
        map = new BMap.Map("allmap");
        map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
        map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
        map.centerAndZoom(new BMap.Point(114.407581,30.555544), 12);


        var opts = {
            width : 200,     // 信息窗口宽度
            height: 60,     // 信息窗口高度
            title : "地址:" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
        };

        //等待页面加载完成
        $.get("/address/findAddressAll.do",function (res) {
            //地图上的坐标信息
            // var data_info = [
            //     [114.430908 , 30.483976, "武汉市洪山区锦江之星(高新二路店)"],
            //     [114.428589, 30.483528 ,"北京市东城区东华门大街"],
            //     [114.323491,30.536339, "武昌火车站地铁站"]
            //
            // ];

            //遍历后台获取的数据
            if (res.flag){ //获取数据成功

                for(var i=0;i<res.data.length;i++){

                    var longitude = res.data[i].longitude ;
                    var latitude = res.data[i].latitude;
                    var position = res.data[i].position;

                    var marker = new BMap.Marker(new BMap.Point(longitude,latitude));  // 创建标注
                    var content = position;
                    map.addOverlay(marker);               // 将标注添加到地图中
                    addClickHandler(content,marker);
                }
            }
/*
            for(var i=0;i<data_info.length;i++){
                var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 创建标注
                var content = data_info[i][2];
                map.addOverlay(marker);               // 将标注添加到地图中
                addClickHandler(content,marker);
            }*/

        });


        function addClickHandler(content,marker){
            marker.addEventListener("click",function(e){
                openInfo(content,e)}
            );
        }

        function openInfo(content,e){
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
            map.openInfoWindow(infoWindow,point); //开启信息窗口
        }



</script>